class RoleQuery extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            rolelist: [''],
        };
    }

    componentDidMount() {
        this.updateRoleList();
    }

    updateRoleList(){
        postJson("/role/getRoleList.x", null, (data) => {
            let orderedRoles = [];
            reorderParents(data.data,null,orderedRoles,'roleParent','roleName');
            this.setState({rolelist:orderedRoles});
        });
    }

    assignMenus(roleCode){
        document.location = '/pages/sys_mng/role/assignRoleMenu.html?roleCode='+roleCode;
    }

    modify(role){
        console.log("role",role);
        this.refs.addRole.setState({role:role});
        this.refs.addRole.show();
    }

    delete(role){
        let params = {roleCode : role.roleCode};
        layui.layer.confirm("确认要删除角色么?",(index)=>{
            postJson("/role/remove.x",$.param(params),() => {
                layui.layer.msg("删除成功");
                this.refs.table.removeTreeTableNode(role.roleName);
            })
            layui.layer.close(index);
        })
    }

    onRoleCreated(){
        this.refs.addRole.close();
        this.refs.table.removeTreeTable();
        this.updateRoleList();
        this.refs.addRole.dataInit();
    }

    showAddRoleDlg(){
        this.refs.addRole.clearForm();
        this.refs.addRole.show();
    }

    render() {
        return (
            <Frame header="角色信息列表" headerBtns={[<HeaderBtn onClick={()=>this.showAddRoleDlg()}>新增角色</HeaderBtn>]}>
                <Table expandable="true" ref="table">
                    <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>角色显示名</th>
                        <th>角色说明</th>
                        <th>操作 </th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.rolelist.map((role) =>{
                            return (
                                <tr data-tt-id={role.roleName} data-tt-parent-id={role.roleParent?role.roleParent:''}>
                                    <td>{role.roleName}</td>
                                    <td>{role.roleDisplay}</td>
                                    <td>{role.roleExp}</td>
                                    <td>
                                        <input type="button" value="修改" className="layui-btn layui-btn-xs layui-btn-normal"
                                               onClick={()=>this.modify(role)}/>
                                        <input type="button" value="删除" className="layui-btn layui-btn-xs layui-btn-danger"
                                               onClick={()=>this.delete(role)}/>
                                        <input type="button" value="分配菜单" className="layui-btn layui-btn-xs"
                                               onClick={()=>this.assignMenus(role.roleCode)}/>
                                    </td>
                                </tr>
                            )
                        })
                    }
                    </tbody>
                </Table>
                <Modal title="分配角色菜单" iframe={true} ref="assignRole"
                        area={['400px','400px']}></Modal>

                <RoleForSaveModal ref="addRole" onRoleCreated={()=>this.onRoleCreated()}></RoleForSaveModal>
            </Frame>
        );
    }
}

ReactDOM.render(<RoleQuery/>, document.getElementById("query"));